import React from 'react';
import {Button, Card, Form, Select, Modal, Table, message, DatePicker} from 'antd';
import axios from './../../axios';
import Utils from './../../utils/utils';
import BaseForm from './../../components/BaseForm';
import ETable from './../../components/ETable';

const FormItem = Form.Item;


export default class Order extends React.Component {
    state = {
        orderInfo: {},
        isFinishOrder: false
    };
    params = {
        page: 1
    };

    //结构化-筛选查询框
    formList = [
        {
            type: 'SELECT',
            label: '城市',
            field: 'city',
            placeholder: '全部',
            initialValue: '1',
            width: 250,
            list: [{id: '0', name: '全部'}, {id: '1', name: '北京'}, {id: '2', name: '天津'}, {id: '3', name: '上海'}]
        },
        {
            type: '时间查询'
        },
        {
            type: 'SELECT',
            label: '订单状态',
            field: 'order_status',
            placeholder: '全部',
            initialValue: '1',
            width: 250,
            list: [{id: '0', name: '全部'}, {id: '1', name: '进行中'}, {id: '2', name: '结束行程'}]
        }
    ]


    componentDidMount() {
        this.requestList()
    }

    requestList = () => {

        axios.requestList('/order/list', this.params, this)
        /*axios.ajax({
            url: '/order/list',
            data: {
                params: this.params
            }
        }).then((res) => {
            this.setState({
                list: res.result.item_list.map((item, index) => {
                    item.key = index
                    return item
                }),
                pagination: Utils.pagination(res, (current) => {
                    this.params.page = current;
                    this.requestList();
                })

            })
        })

*/
    };
    //结束订单
    handleOrderFinish = () => {
        let id = this.state.selectItem && this.state.selectItem.id;
        if (!id) {
            message.info('请选择一条订单')
            return
        }
        console.log('id', id)
        //查询表单信息
        axios.ajax({
            url: '/order/ebike_info',
            data: {
                params: {
                    // page: id,
                    orderId: id
                }
            }

        }).then((res) => {
            if (res.code === '0') {
                this.setState({
                    orderInfo: res.result,
                    isFinishOrder: true
                })
            }
        })

        this.setState({
            isFinishOrder: true,

        })

    };
    //单选选中行
    onRowClick = (record, index) => {
        let selectKey = [index];
        console.log('record', record);
        this.setState({
            selectRowKeys: selectKey,
            selectItem: record
        })


    };


    //确认结束
    handleFinish = () => {
        let id = this.state.selectItem && this.state.selectItem.id;


        //查询表单信息
        axios.ajax({
            url: '/order/finish_order',
            data: {
                params: {
                    orderId: id

                }
            }

        }).then((res) => {
            if (res.code === '0') {
                message.info('订单结束成功！');
                this.setState({
                    orderInfo: res.result,
                    isFinishOrder: false
                })
                this.requestList();
            }
        })

    };

    //查看详情
    openDetail = () => {
        let id = this.state.selectedItem && this.state.selectedItem.id;
        console.log('this.state.selectItem', this.state.selectedItem)
        if (!id) {

            message.info('请选择一条订单')
            return
        }
        window.open(`/#/common/order/detail/${id}`, '_blank')

    };


    //筛选框查询
    filterSearch = (params) => {
        this.params = params;
        this.requestList();

    };

    render() {

        const columns = [
            {
                title: '订单编号',
                dataIndex: 'order_sn'
            },
            {
                title: '车辆编号',
                dataIndex: 'bike_sn'
            },
            {
                title: '用户名',
                dataIndex: 'user_name'
            },
            {
                title: '手机号',
                dataIndex: 'mobile'
            },
            {
                title: '里程',
                dataIndex: 'distance',
                render(distance) {
                    return distance / 1000 + 'km'
                }

            },
            {
                title: '行驶时长',
                dataIndex: 'total_time'
            },
            {
                title: '状态',
                dataIndex: 'status'
            },
            {
                title: '开始时间',
                dataIndex: 'start_time'
            },
            {
                title: '结束时间',
                dataIndex: 'end_time'
            },
            {
                title: '订单金额',
                dataIndex: 'total_fee'
            },
            {
                title: '实付金额',
                dataIndex: 'user_pay'
            }
        ];
        const rowSelection = {
            type: 'radio',
            selectedRowKeys: this.state.selectRowKeys
        };

        const formItemLayout = {
            labelCol: {
                span: 5
            },
            wrapperCol: {
                span: 15
            }
        };
        return (
            <div>
                <Card>
                    <BaseForm formList={this.formList} filterSearch={this.filterSearch}/>
                </Card>
                <Card style={{marginTop: 10}}>
                    <Button type="primary" onClick={this.openDetail}>订单详情</Button>
                    <Button type="primary" style={{marginLeft: 20}} onClick={this.handleOrderFinish}>结束订单</Button>
                </Card>
                <div className="content-wrap">

                    <ETable
                        updateSelectedItem={Utils.updateSelectedItem.bind(this)}
                        columns={columns}
                        rowSelection='radio'
                        dataSource={this.state.list}
                        pagination={this.state.pagination}
                        selectedRowKeys={this.state.selectRowKeys}
                        selectedIds={this.state.selectedIds}
                        selectedItem={this.state.selectedItem}

                    />
                    {/*<Table
                        bordered
                        columns={columns}
                        onRow={(record, index) => {
                            return {
                                onClick: () => {
                                    this.onRowClick(record, index)
                                },   //点击行

                            }
                        }}
                        rowSelection={rowSelection}
                        dataSource={this.state.list}
                        pagination={this.state.pagination}
                    />*/}
                </div>

                <Modal
                    title="结束订单"
                    visible={this.state.isFinishOrder}
                    onCancel={() => {
                        this.setState({
                            isFinishOrder: false
                        })
                    }}
                    onOk={this.handleFinish}
                >
                    <Form layout="horizontal">
                        <FormItem label="车辆编号" {...formItemLayout}>
                            {this.state.orderInfo.bike_sn}
                        </FormItem>
                        <FormItem label="剩余电量" {...formItemLayout}>
                            {this.state.orderInfo.battery + '%'}
                        </FormItem>
                        <FormItem label="行程开始时间" {...formItemLayout}>
                            {this.state.orderInfo.start_time}
                        </FormItem>
                        <FormItem label="当前位置" {...formItemLayout}>
                            {this.state.orderInfo.location}
                        </FormItem>
                    </Form>

                </Modal>
            </div>
        );
    }
}

/*
class FilterForm extends React.Component {
    render() {
        const {getFieldDecorator} = this.props.form;

        return (
            <Form layout="inline">
                <FormItem label="城市">
                    {
                        getFieldDecorator('city_id', {})(
                            <Select
                                style={{width: 250}}
                                placeholder="全部">
                                <Option value="">全部</Option>
                                <Option value="1">北京市</Option>
                                <Option value="2">天津市</Option>
                                <Option value="3">深圳市</Option>
                            </Select>
                        )
                    }

                </FormItem>
                <FormItem label="订单时间">
                    {
                        getFieldDecorator('start_time', {})(
                            <DatePicker
                                style={{width: 200}}
                                showTime
                                format="YYYY-MM-DD HH:mm:ss"
                            />
                        )
                    }
                    {
                        getFieldDecorator('end_time', {})(
                            <DatePicker
                                style={{marginLeft: 20, width: 200}}
                                showTime
                                format="YYYY-MM-DD HH:mm:ss"
                            />
                        )
                    }

                </FormItem>

                <FormItem label="订单状态">
                    {
                        getFieldDecorator('order_status', {})(
                            <Select
                                style={{width: 200}}
                                placeholder="全部">
                                <Option value="">全部</Option>
                                <Option value="1">进行中</Option>
                                <Option value="2">结束行程</Option>
                            </Select>
                        )
                    }

                </FormItem>
                <FormItem>
                    <Button type="primary" style={{marginRight: 10}}>查询</Button>
                    <Button type="primary">重置</Button>

                </FormItem>
            </Form>
        );
    }


}


FilterForm = Form.create()(FilterForm);
*/
